<template>
  <div class="gagnwei-setting-wrapper">
    <el-collapse
      v-model="collActiveName"
      accordion
      v-for="(item,index) in categoryData"
      :key="index"
      @change="handleChange"
    >
      <el-collapse-item
        :title="item.name"
        :name="item.id"
      >
        <div class="gangwei-setting-item-wrapper">
          <el-tag
            v-if="dynamicTags&&dynamicTags.length === 0"
            type="danger"
          >
            此分类下暂无岗位
          </el-tag>
          <div class="gangwei-setting-content">
            <el-tag
              :key="gangwei"
              v-for="gangwei in dynamicTags"
              closable
              @close="handleClose(gangwei)"
            >
              <span> {{gangwei}} </span>
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="gangweiInputVisible"
              v-model="gangweiInputValue"
              :ref="'ref'+item.id"
              size="small"
              @keyup.enter.native="handleInputConfirm(item.id)"
              @blur="handleInputConfirm(item.id)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(item.id)"
            >+ 新增岗位</el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  props: {
  },
  data () {
    return {
      categoryData: [],
      gangweiData: [],
      dynamicTags: [],
      gangweiInputVisible: false,
      gangweiInputValue: '',
      collActiveName: 0
    }
  },
  created () {
    this.getCategoryData()
  },
  methods: {
    // 获取岗位分类数据
    async getCategoryData () {
      console.log('我被调用了')
      const { data } = await this.$http.get('/cg/getlist')
      this.categoryData = data.data
      this.dynamicTags = []
      this.categoryData.map(item => {
        this.dynamicTags.push(item.name)
      })
    },
    // 删除岗位,tag是tag名
    async handleClose (tag) {
      const { data } = await this.$http.post('/gw/del', { name: tag })
      if (data.error_code === 1) {
        this.$message.error('岗位删除失败')
      } else {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      }
    },
    showInput (cgid) {
      console.log(cgid)
      this.gangweiInputVisible = true
      const ref = `ref${cgid}`
      console.log(ref)
      // BUG 无法获取焦点
      // 可供参考：https://blog.csdn.net/Monster_ixx/article/details/105499919
      console.log(this.$refs[ref])
      // this.$nextTick(_ => {
      //   /* no-unused-expressions */
      //   this.$refs[ref]?.$refs?.input.focus()
      // })
    },
    // 岗位配置下的手风琴折叠/展开状态改变
    // val：当前展开项的id(同时也是cgid),全部折叠val为空
    handleChange (val) {
      // 延时作用:等手风琴的动画结束了，才置空。否则高度会突变
      // 这样加了，折叠的时候没问题，展开的时候有小问题了
      // 最好的办法，找到手风琴关闭后和暂开后的回调，或者干脆取消手风琴的动画
      setTimeout(async () => {
        this.dynamicTags = []
        if (!val) {
          return
        }
        const { data } = await this.$http.get('/gw/getlist', { params: { cgid: val } })
        data.data.map(item => {
          this.dynamicTags.push(item.name)
        })
      }, 300)
    },
    // 添加新标签，id为cgid分类id
    async handleInputConfirm (id) {
      const gangweiInputValue = this.gangweiInputValue.trim()
      if (gangweiInputValue && gangweiInputValue.length > 0) {
        const { data } = await this.$http.post('/gw/add', {
          name: gangweiInputValue, cgid: id
        })
        if (data.error_code !== 0) {
          this.$message.error('添加失败，已存在该岗位!')
        } else {
          this.dynamicTags.push(gangweiInputValue)
        }
      }
      this.gangweiInputVisible = false
      this.gangweiInputValue = ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin";
.gagnwei-setting-wrapper {
  .gangwei-setting-content {
    display: flex;
    margin-top: 20px;
    flex-flow: row wrap;
    @include tag(20px);
  }
}
</style>
